<template>
	<view>
		<view class="navigationBar flex align-center just-center" :style="'padding-top:' + navigationHeight + 'px;'"
			:class="bgType == 1 ? 'bgColor-white' : bgType == 2 ? 'bgColor-theme' : ''">
			<image class="bg" :src="$showImg('static/common/top_bg.png')" mode="widthFix" v-if="bgType == 3">
			</image>

			<image class="bg" :src="$showImg('static/shopping/vipbg.png')" mode="widthFix" v-if="bgType == 4">
			</image>

			<image class="bg" :src="$showImg('static/shopping/mbg.png')" mode="widthFix" v-if="bgType == 5">
			</image>

			<view class="navigation-back flex align-center just-center" v-if="backType != 0" @click="onBack">
				<image v-if="backType == 1" :src="$showImg('static/common/navigation_back_black.png')">
				</image>
				<image style="z-index: 999" v-else-if="backType == 2"
					:src="$showImg('static/common/navigation_back_white.png')">
				</image>
			</view>

			<view class="navigation-title flex align-center just-center">
				<text class="f-36" :class="
                        bgType == 2
                            ? 'title-color-white'
                            : bgType == 4
                            ? 'title-color-white'
                            : 'title-color-black'
                    ">{{ navigationTitle }}</text>
			</view>

			<view class="navigation-back" v-if="backType != 0"></view>
		</view>
	</view>
</template>

<script>
	import {
		imageURL
	} from "@/utils/config.js";

	export default {
		props: {
			/**
			 * 标题
			 */
			navigationTitle: {
				type: String,
				default: "",
			},
			/**
			 * 返回键的状态
			 * 0-不显示 1-黑色  2-白色
			 */
			backType: {
				type: Number,
				default: 0,
			},
			/**
			 * 背景状态
			 * 1-白色背景 2-主题颜色背景 3-图片
			 */
			bgType: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				navigationHeight: uni.getSystemInfoSync()["statusBarHeight"],
				imageURL,
			};
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.navigationBar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 45px;
		z-index: 999;
		overflow: hidden;
		box-sizing: content-box;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 998;
		}

		.navigation-title {
			margin-left: 5px;
			margin-right: 5px;
			flex: 1;
			height: 45px;
			position: relative;
			z-index: 1000;
		}

		.navigation-back {
			width: 45px;
			height: 45px;
			position: relative;
			z-index: 1000;

			>image {
				width: 28px;
				height: 28px;
			}
		}
	}

	.bgColor-white {
		background-color: white;
	}

	.title-color-black {
		color: $text-color;
	}

	.bgColor-theme {
		background-color: $theme-color;
	}

	.title-color-white {
		color: white;
	}
</style>
